<template>
  <div class="person">
    <!-- 基本信息 -->
    <div class="descriptions__title">基本信息</div>
    <el-descriptions :column="4">
      <el-descriptions-item v-for="item in baseConfig" :key="item.name" :label="item.label">
        {{ baseInfo[item.key] }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 在校信息 -->
    <div class="descriptions__title">在校信息</div>
    <el-descriptions :column="4">
      <el-descriptions-item v-for="item in schConfig" :key="item.name" :label="item.label">
        {{ baseInfo[item.key] }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 家长信息 -->
    <div class="descriptions__title">家长信息</div>
    <div class="container">
      <div v-for="item in parentInfo" :key="item.name" class="container-item">
        <div class="role">{{ item.role }}</div>
        <div class="detail">
          <div class="left">
            <!-- <el-avatar :size="150" :src="item.avatar" /> -->
            <img :src="item.avatar" class="img" />
            <span class="name">{{ item.name }}</span>
          </div>
          <div class="right">
            <div>
              <span class="info__label">工作单位</span>
              <span class="info__content">{{ item.workUnit }}</span>
            </div>
            <div>
              <span class="info__label">职业</span>
              <span class="info__content">{{ item.job }}</span>
            </div>
            <div>
              <span class="info__label">电话</span>
              <span class="info__content">{{ item.phone }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { getStudentInfo, getStudentParentInfo } from '@/api/student'
const studentInfo = ref({})
const parent = ref({})
const route = useRoute()

// assetsUrl路径
const assetsUrl = ref('../../../src/assets/')

//基本信息
const baseConfig = ref([
  { key: 'stuName', label: '姓名' },
  { key: 'sex', label: '性别' },
  { key: 'birthday', label: '出生日期' },
  { key: 'identityNumber', label: '身份证号' },
  { key: 'nation', label: '民族' },
  { key: 'nativePlace', label: '籍贯' },
  { key: 'livingPlace', label: '户口' },
  { key: 'marriage', label: '婚姻状况' },
  { key: 'mobile', label: '手机' },
  { key: 'politicalAffiliation', label: '政治面貌' },
  { key: 'classNum', label: '所属党支部' },
])
const baseInfo = ref({
  stuName: 'zhangsan',
  sex: '男',
  birthday: '2001年5月1日',
  identityNumber: '522622202308146527',
  nation: '汉',
  nativePlace: '山东威海',
  livingPlace: '山东威海',
  marriage: '未婚',
  mobile: '12312332',
  politicalAffiliation: '政治面貌',
  classNum: '2101',
})

//在校信息
const schConfig = ref([
  { key: 'eduType', label: '学历类别' },
  { key: 'institute', label: '学院' },
  { key: 'major', label: '专业' },
  { key: 'classNum', label: '班级' },
  { key: 'sourceType', label: '生源类型' },
  { key: 'lengthOfSchool', label: '学制' },
  { key: 'registerTime', label: '入学时间' },
  { key: 'graduationTime', label: '毕业时间' },
])
const schInfo = ref({
  eduType: '本科',
  institute: '计算机学院',
  major: '通信工程',
  classNum: '2101',
  sourceType: '定向',
  lengthOfSchool: '四年制',
  registerTime: '2022年7月',
  graduationTime: '2022年7月',
})

// 家长信息
const parentInfo = ref([
  {
    // avatar:size="64",src "female",
    // avatar: require('..src/assets/avatar15.png'),
    avatar:
      `${assetsUrl.value}avatar15.png`,
    name: 'zhangba',
    role: '父亲',
    workUnit: 'A单位',
    job: 'A工作',
    phone: 15551232333,
  },
  {
    avatar:
      `${assetsUrl.value}mom.png`,
    name: 'zhangma',
    role: '母亲',
    workUnit: 'B单位',
    job: 'B工作',
    phone: 15231232333,
  },
])

const getStudentInfoImpl = async () => {
  const result = await Promise.all([
    getStudentParentInfo(route.params.id),
    getStudentInfo(route.params.id),
  ])
  console.log('result==>', result)

  studentInfo.value = result[1].data.data
  studentInfo.value.classNum =
    studentInfo.value.major + studentInfo.value.classNum

  for (const key in studentInfo.value) {
    const element = studentInfo.value[key]
    baseInfo.value[key] = element
    // if (key === "marriage") {
    //   baseInfo.value[key] = "未婚"
    // }
    // if (key === "politicalAffiliation") {
    //   baseInfo.value[key] = "党员"
    // }
  }
  parent.value = result[0].data.data
  parentInfo.value[0].name = parent.value.fatherName
  parentInfo.value[0].phone = parent.value.faPhone
  parentInfo.value[0].workUnit = parent.value.faWork
  parentInfo.value[0].job = parent.value.faProfession
  parentInfo.value[1].name = parent.value.motherName
  parentInfo.value[1].phone = parent.value.moPhone
  parentInfo.value[1].workUnit = parent.value.moWork
  parentInfo.value[1].job = parent.value.moProfession
  console.log('parent===>', parent)
}

getStudentInfoImpl()

// for (const key in props.studentInfo) {
//   const element = props.studentInfo[key]
//   console.log("element==>", element)
// }
// baseInfo.value.name = stuName
// baseInfo.value.gender = sex
//  name: "zhangsan",
// gender: "男",
// birthday: "2001年5月1日",
// idNumber: "123123123123",
// nation: "汉",
// native: "山东威海",
// register: "山东威海",
// maritalStatus: "未婚",
// phone: "12312332",
// politicsStatus: "政治面貌",
// branch: "所属党支部",
</script>
<style lang="scss" scoped>
.person {
  .el-descriptions {
    :deep(.el-descriptions__header) {
      height: 80px;
      line-height: 80px;

      .el-descriptions__title {
        width: 100%;
        text-align: center;
        font-size: 20px;
        color: #000;
      }
    }

    :deep(.el-descriptions__body) {
      .el-descriptions__table {
        tbody {
          tr:nth-child(2n-1) {
            background-color: #d1dfec;

            .el-descriptions__cell {
              padding: 10px 0;
            }
          }

          tr:nth-child(2n) {
            .el-descriptions__cell {
              padding: 20px 0;
            }
          }

          .el-descriptions__cell {
            font-size: 16px;
            padding-left: 20px !important;
          }
        }
      }
    }
  }

  .container {
    display: flex;

    &-item {
      flex: 1;
      position: relative;

      .role {
        font-size: 18px;
        font-weight: 700;
        position: relative;

        &::after {
          content: '';
          height: 3px;
          width: 40px;
          position: absolute;
          bottom: -5px;
          left: 0;
          background: #94b4db;
        }
      }

      .detail {
        display: flex;
        padding-left: 80px;
        align-items: center;
        margin-top: 20px;

        .left {
          display: flex;
          flex-direction: column;
          align-content: center;
          justify-content: center;

          .name {
            text-align: center;
            margin-top: 20px;
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          padding-left: 40px;
          

          &>div {
            margin-bottom: 20px;
            font-size: 16px;

            .info__label {
              display: inline-block;
              width: 100px;
            }
          }
        }
      }
    }

    .container-item:nth-child(1) {
      &::after {
        content: '';
        position: absolute;
        right: 20px;
        top: 0;
        height: 100%;
        width: 1px;
        background: #eee;
      }
    }
  }
}
</style>
